<template>
	<view class="container">
		<view class="item-info">
			<view class="info-title">物品信息</view>
			<view class="info-content">
				<view class="info-item">
					<text class="label">物品名称：</text>
					<text class="value">{{itemInfo.itemName}}</text>
				</view>
				<view class="info-item">
					<text class="label">物品编码：</text>
					<text class="value">{{itemInfo.itemCode}}</text>
				</view>
				<view class="info-item">
					<text class="label">类别：</text>
					<text class="value">{{itemInfo.itemCategory}}</text>
				</view>
				<view class="info-item">
					<text class="label">规格型号：</text>
					<text class="value">{{itemInfo.specification}}</text>
				</view>
				<view class="info-item">
					<text class="label">存放位置：</text>
					<text class="value">{{itemInfo.storageLocation}}</text>
				</view>
			</view>
		</view>

		<view class="borrow-form">
			<view class="form-title">借用信息</view>
			<uni-forms ref="form" :model="requestForm" :rules="rules">
				<uni-forms-item label="任务ID" name="taskId" >
					<uni-easyinput style="width: 100%;" v-model="requestForm.taskId" placeholder="请输入任务ID" />
				</uni-forms-item>
				
				<uni-forms-item label="借用数量" name="quantity" >
					<uni-easyinput type="number" style="width: 100%;" v-model="requestForm.quantity" placeholder="请输入借用数量" />
				</uni-forms-item>
				
				<uni-forms-item label="借用用途" name="purpose" >
					<uni-easyinput type="textarea" style="width: 100%;" autoHeight v-model="requestForm.purpose" placeholder="请输入借用用途" />
				</uni-forms-item>

				<uni-forms-item label="预计归还日期" name="expectedReturnDate">
					<picker mode="date" :value="requestForm.expectedReturnDate" @change="handleDateChange" class="date-picker">
						<view class="picker-text">{{requestForm.expectedReturnDate || '请选择日期'}}</view>
					</picker>
				</uni-forms-item>
			</uni-forms>

			<view class="form-buttons">
				<button class="btn cancel" @click="handleCancel">取消</button>
				<button class="btn confirm" @click="submitRequest">确认借用</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemInfo: {},
				requestForm: {
					taskId: '',
					quantity: '',
					purpose: '',
					expectedReturnDate: '',
					status: 1
				},
				rules: {
					taskId: {
						rules: [{
							required: true,
							errorMessage: '请输入任务ID'
						}]
					},
					quantity: {
						rules: [{
							required: true,
							errorMessage: '请输入借用数量'
						}]
					},
					purpose: {
						rules: [{
							required: true,
							errorMessage: '请输入借用用途'
						}]
					},
					expectedReturnDate: {
						rules: [{
							required: true,
							errorMessage: '请选择预计归还日期'
						}]
					}
				}
			}
		},
		onLoad(options) {
			if (options.item) {
				this.itemInfo = JSON.parse(decodeURIComponent(options.item))
				console.log('物品详情:', this.itemInfo)
			}
		},
		methods: {
			handleDateChange(e) {
				this.requestForm.expectedReturnDate = e.detail.value
			},
			
			handleCancel() {
				uni.navigateBack()
			},
			
			async submitRequest() {
				try {
					const valid = await this.$refs.form.validate()
					if (!valid) return
					
					// 添加物品信息到请求数据
					const requestData = {
						...this.requestForm,
						itemId: this.itemInfo.itemId,
						itemName: this.itemInfo.itemName,
						itemCategory: this.itemInfo.itemCategory,
						specification: this.itemInfo.specification,
						storageLocation: this.itemInfo.storageLocation
					}
					console.log('发送的数据:', requestData)
					const res = await uni.request({
						url: this.$baseUrl + '/item/createRequest',
						method: 'POST',
						data: requestData, // 显式转为JSON
						header: {
							'Content-Type': 'application/json',
							'satoken': uni.getStorageSync('token')
						}
					})
					if (res.statusCode === 200 && res.data.code === 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						console.error('申请失败:', res)
						uni.showToast({
							title: res.data?.message || '申请失败',
							icon: 'none'
						})
					}
				} catch (e) {
					console.error('申请出错:', e)
					uni.showToast({
						title: '申请失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;

	.item-info {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		.info-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
		}

		.info-content {
			.info-item {
				display: flex;
				margin-bottom: 16rpx;
				align-items: center;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					width: 160rpx;
					color: #666;
					font-size: 28rpx;
				}

				.value {
					flex: 1;
					color: #333;
					font-size: 28rpx;
				}
			}
		}
	}

	.borrow-form {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		.form-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
		}

		.date-picker {
			width: 100%;
		}

		.picker-text {
			height: 70rpx;
			line-height: 70rpx;
			border: 1rpx solid #ddd;
			border-radius: 6rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #333;
			background-color: #fff;
		}

		.form-buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			gap: 20rpx;

			.btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 28rpx;

				&.cancel {
					background-color: #f5f5f5;
					color: #666;
				}

				&.confirm {
					background-color: #007AFF;
					color: #fff;
				}
			}
		}
	}
}
</style>